<input type="hidden" name="{{attrs.name}}" id="{{attrs.id}}" value="{{attrs.value}}"  /> 
<input type="text" name="{{attrs.name}}_text" id="{{attrs.id}}_text" value="{{attrs.label}}" /> 
<script type="text/javascript" defer="defer">
<!--
    $(function(){
        function formatItem(row){
            return row[1] ;
        }
        function formatResult(row) {
                return row[1];
        }
        $("#{{id}}_text").autocomplete('{{source}}', {
            formatResult:formatResult, formatItem:formatItem,        
            {% for key,value in options.items %}{{key}}:{{ value }},{% endfor %}
        });
        $("#{{id}}_text").result(function(event, data, formatted) {
                                jQuery("#{{id}}").val(formatted);                         
                            });
        $("#{{id}}_text").change(function() {
            if (this.value == "")
              jQuery("#{{id}}").val('');                 

        });
    });
-->
</script>